<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 需求1.定义一个v-big指令，和v-text类似，但会把绑定的数值放大10倍
                需求2.定义一个v-fbind指令，和v-bind类似，但可以让其所绑定的元素默认获取焦点 -->
            <h1>当前的n值是<span v-text="n"></span></h1>
            <h2>放大10倍后的n值是<span v-big="n"></span></h2>
            <button @click="n++">n++</button>
            <hr/>
            <!-- v-bind写法 -->
            <!-- <input type="text" v-bind:value="n"/> -->
             <!-- 自定义指令写法 -->
             <input type="text" v-fbind:value="n"/>

             <!-- 注意坑1：当有单个单词的自定义指令写法 -->
              <h2>放大10倍后的n值是<span v-big-number="n"></span></h2>
        </div>

        <div id="root2">
            <h2>x自动获取焦点</h2>
            <input type="text" v-allfbind:value="x"/>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            //定义全局指令-写在最前面
            Vue.directive('allfbind',{
                //指令与元素成功绑定时（一行来）调用
                bind(element,binding){
                    console.log('bind',this) //注意坑2：这里的this都是指向的window
                    element.value = binding.value
                },
                //指令所在元素被插入页面时调用
                inserted(element,binding){
                    console.log('inserted')
                    element.focus()
                },
                //指令所在的模板被重新解析时调用
                update(element,binding){
                    console.log('update')
                    element.value = binding.value
                    element.focus()
                }
            })

            // 创建Vue实例
            new Vue({
                el:'#root', 
                data:{  
                    n:0
                },
                //自定义指令函数：定义的时候是big，使用的时候必须是v-big
                directives:{
                    //方式一：函数式=简单写法-element是原生DOM标签span，binding是元素等一些内容
                    //big函数何时调用？1.指令与元素成功绑定时（一上来，这时还没有在页面上）；2.指令所在的模板被重新解析时。这里的模板是root里的内容
                    big(element,binding){ 
                        //console.log(binding.value)
                        element.innerText = binding.value*10
                    },
                    // fbind(element,binding){
                    //     element.value = binding.value
                    //     //此时获取焦点并不生效，因为此时虽然与元素绑定成功，但还没有渲染在页面上，所以不生效
                    //     //当点击一次n++的时候，能够获取焦点。原因：改了n，n被改动后就会被重新渲染到页面上，就会再次调用fbind方法，这时input框已经出现在页面上了，所以获取焦点能成功
                    //     element.focus()
                    // },
                    //想要在一开始就能获取到焦点--不能用函数式--使用对象式
                    fbind:{
                        //指令与元素成功绑定时（一行来）调用
                        bind(element,binding){
                            console.log('bind',this) //注意坑2：这里的this都是指向的window
                            element.value = binding.value
                        },
                        //指令所在元素被插入页面时调用
                        inserted(element,binding){
                            console.log('inserted')
                            element.focus()
                        },
                        //指令所在的模板被重新解析时调用
                        update(element,binding){
                            console.log('update')
                            element.value = binding.value
                            element.focus()
                        }
                    },
                    //多个单词的自定义指令写法，对象里的big、fbind都省略了引号，如果是多个单词就必须加上引号
                    'big-number'(element,binding){ 
                        //console.log(binding.value)
                        element.innerText = binding.value*10
                    }

                }
            })

            new Vue({
                el:'#root2',
                data:{
                    x:1
                }
            })
        </script>

        
    </body>
</html>